<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p>{{message}}</p>
        <input type="text" v-model="message">
    </div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = Vue.createApp({
        data() {
            return {
                message: 'hello Vue.js',
                rawHtml: '<span style="color:red">This should Be red.</span>',
            }
        },
        template:` "<div> hello Vue.js<div>"
            <div> {{ message }} </div >
            <div v-once> {{message}} </div>
            <p>Using mustaches: {{ rawHtml }}</p>
            <p>Using v-html directive: <span v-html="rawHtml"></span></p>
            <div :[attributeName] = "message" > title: { { message } }</div >
            <div><button v-bind:disabled="isButtonDisabled" @[eventName]="btnClick"
    `
    ,
            methods: {
                btnClick(){
                console.log("btnClick")
            }
    },
})
            const vm =app.mount("#app");
</script>

</html>